﻿@model Nop.Web.Models.ShareBuy.ShareBuyItemListModel
@using Nop.Web;
@using Nop.Web.Extensions;

<script src="/Scripts/jquery.masonry.min.js"></script>
<script src="/Scripts/jquery.infinitescroll.min.js" type="text/javascript"></script>
<script>
    $(function () {
        var $container = $('#pictures');
        $container.masonry({
            itemSelector: '.sl-item'
        });

        $container.infinitescroll({
            navSelector: '#pager',    // selector for the paged navigation 
            nextSelector: '#pager a:first',  // selector for the NEXT link (to page 2)
            itemSelector: '.sl-item',     // selector for all items you'll retrieve
            loading: {
                finishedMsg: 'No more pages to load.',
                img: 'http://i.imgur.com/6RMhx.gif'
            }
        },
        // trigger Masonry as a callback
  function (newElements) {
      // hide new items while they are loading
      var $newElems = $(newElements).css({ opacity: 0 });
      // ensure that images load before adding to masonry layout
      $newElems.imagesLoaded(function () {
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry('appended', $newElems, true);
      });
  }
);
    });
</script>
<div class="sharebuy">
    <div class="page-title">
        <table style="width: 100%;">
            <tr>
                <td class="title">Hot Share Baught
                </td>

            </tr>
        </table>
    </div>
    <div id="c-hot-show" class="m" data-cat="0">
        <div class="mt mt-blue">
            <div id="pictures" class="mc clearfix">
                @foreach (var item in Model.ShareBuyItems)
                {
                    <div class="sl-item">
                        <a target="_blank" href="@Url.RouteUrl("ShareBuyDetail", new { id = item.Id })" class="sl-p-img tc">
                            <img width="220" data-img="1" alt="" src="@item.DefaultPictureModel.PictureUrl" class="err-product">
                        </a><a target="_blank" href="@Url.RouteUrl("ShareBuyDetail", new { id = item.Id })" class="sl-desc">@item.Title
                        </a>
                        <div class="sl-comment clearfix">
                            @foreach (var comment in item.ShareBuyCommentModels)
                            {
                                <s></s>
                                <dl class="clearfix">
                                    <dt>
                                        <img width="34" height="34" alt="@comment.CustomerName" src="@comment.CustomerAvatarUrl"></dt>
                                    <dd>
                                        <blockquote>@comment.CommentText</blockquote>
                                        <div class="sl-comment-meta">
                                            @comment.CustomerName <em>@comment.CreatedOn.ToShortTimeString()</em>
                                        </div>
                                    </dd>
                                </dl>
                            }
                        </div>
                        <div class="sl-comment-data">
                            <a class="goto-view" target="_blank" href="@Url.RouteUrl("ShareBuyDetail", new { id = item.Id })">Go to View</a> | <em>@item.NumberOfComments Comments</em>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
    <div id="pager" class="pager">
        @Html.Pager(Model.PagingFilteringContext).QueryParam("pagenumber")
    </div>
</div>
